<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>接口配置管理</el-breadcrumb-item>
        <el-breadcrumb-item>接口配置列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-form">
        <el-form ref="searchForm" :model="searchParams" inline>
            <el-form-item label="接口ID">
                <el-input v-model.number="searchParams.id" clearable />
            </el-form-item>
            <el-form-item label="所属业务系统">
                <el-select v-model="searchParams.systemCode" clearable placeholder="全部">
                    <template v-for="(item, index) in systemSelectList" :key="index">
                        <el-option :value="item.systemCode">{{item.systemName}}</el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="数据来源">
                <el-input v-model.trim="searchParams.datasourceContains" clearable />
            </el-form-item>
            <el-form-item label="接口说明">
                <el-input v-model.trim="searchParams.nameContains" clearable />
            </el-form-item>
            <el-form-item label="版本">
                <el-input v-model.trim="searchParams.versionContains" clearable />
            </el-form-item>
            <el-form-item label="主题">
                <el-input v-model.trim="searchParams.topicContains" clearable />
            </el-form-item>
            <el-form-item label="接口路径">
                <el-input v-model.trim="searchParams.apiPathContains" clearable />
            </el-form-item>
            <!-- <template v-for="item in searchParamsConfig" :key="item.field">
                <el-form-item :label="item.label" :prop="item.field">
                    <el-input v-model.trim="searchParams[item.field]" clearable />
                </el-form-item>
            </template> -->
            <el-form-item>
                <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="list-table">
        <div class="operation-btns">
            <el-button @click="add" icon="el-icon-plus" type="primary">添加</el-button>
            <template v-if="selectedRows.length > 0">
                <el-button @click="enableSelected" icon="el-icon-check" type="success">启用</el-button>
                <el-button @click="disableSelected" icon="el-icon-close" type="warning">禁用</el-button>
                <el-button @click="deleteSelected" icon="el-icon-delete" type="danger">删除</el-button>
            </template>
        </div>
        <el-table ref="tableRef" :data="dataPageList.list" @selection-change="handleSelectionChange" @sort-change="handleSortChange" @row-dblclick="detail" stripe>
            <el-table-column type="selection" width="55" fixed="left"></el-table-column>
            <el-table-columns :columns="columns"></el-table-columns>
            <el-table-column prop="operations" label="操作" width="140" fixed="right">
                <template #default="{row}">
                    <table-operations :edit="true" @edit="edit(row)"
                                      :copy="true" @copy="edit(row, true)"
                                      :deleted="row.deleted"
                                      :disable="true" @disable="switchDeleted(row)"
                                      :enable="true" @enable="switchDeleted(row)"
                                      :del="true" @del="del(row)">
                    </table-operations>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="dataPageList.total" :page-sizes="pageSizeOptions" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <api-detail :pk="editPk" :visible="detailDrawerVisible" @edit="edit" @del="del" :system-select-list="systemSelectList" />
    <api-save :pk="editPk" :visible="saveDrawerVisible" :operateType="operateType" @save="save" :system-select-list="systemSelectList" />
</template>

<script lang="ts">
import { defineComponent, reactive, ref, provide, onMounted } from 'vue'
import { OperateRequests } from '@/composables/models'
import { PageSizeOptions, SortEnum } from '@/constants'
import { getOperations, getSelectionWithOperations } from '@/composables/operations'
import { listSearch, pageListSearch, handleSortChange } from '@/composables/requests'
import ElTableColumns from '@/components/ElTableColumns.vue'
import TableOperations from '@/components/TableOperations.vue'
import ApiSave from './ApiSave.vue'
import ApiDetail from './ApiDetail.vue'

const columns = [
    { name: "id", label: "接口ID", sortable: true },
    { name: "systemCode", label: "所属业务系统", sortable: true },
    { name: "datasource", label: "数据来源", sortable: true },
    { name: "name", label: "接口说明", sortable: true },
    { name: "version", label: "版本", sortable: true },
    { name: "topic", label: "主题", sortable: true },
    { name: "apiPath", label: "接口路径", sortable: true },
    { name: "resultType", label: "sql返回结果" },
    { name: "hasParams", label: "是否有参数" },
    { name: "temporary", label: "是否临时接口" },
    { name: "expires", label: "过期时间", width: 140 },
    { name: "cacheable", label: "是否可以缓存" },
    { name: "cacheTime", label: "缓存时长" },
    { name: "extInfo", label: "扩展信息" },
    { name: "createUser", label: "创建人" },
    { name: "updateUser", label: "修改人" },
    { name: "createTime", label: "创建时间", width: 140 },
    { name: "updateTime", label: "更新时间", width: 140 },
]

const pkField = 'id'
const pksField = 'ids'
const pkFields = ['id']
const apisRequest: OperateRequests = {
    disable: { url: '/api/disable', method: 'PATCH' },
    enable: { url: '/api/enable', method: 'PATCH' },
    delete: { url: '/api/delete', method: 'DELETE' }
}

const resultTypeSelectList = [
    { value: 1, text: 'List' }, 
    { value: 2, text: 'Object' }
]

const searchParamsConfig = [
    { label: '所属业务系统', type: 'string', field: 'systemCodeContains' },
    { label: '数据来源', type: 'string', field: 'datasourceContains' },
    { label: '接口说明', type: 'string', field: 'nameContains' },
    { label: '版本', type: 'string', field: 'versionContains' },
    { label: '主题', type: 'string', field: 'topicContains' },
    { label: '接口路径', type: 'string', field: 'apiPathContains' },
]

export default defineComponent({
    components: { ElTableColumns, TableOperations, ApiSave, ApiDetail },
    name: "ApiIndex",
    setup() {
        const searchParams = reactive<any>({})
        const defaultSortParams = {
            'idSort': SortEnum.DESC
        }
        const sortParams = reactive<any>({ ...defaultSortParams })
        const tableRef = ref()

        const { pageNum, pageSize, dataPageList, search } = pageListSearch({ url: '/api/page-list', method: 'GET' }, searchParams, sortParams)
        const { selectedRows, handleSelectionChange, disableSelected, enableSelected, deleteSelected } = getSelectionWithOperations(apisRequest, pkField, pksField)

        const afterOperation = () => {
            tableRef.value.clearSelection()
        }

        const systemSearchParams = reactive<any>({
        })
        const getSystemSelectList = listSearch({ url: '/api-system/list', method: 'GET' }, systemSearchParams, {})

        const { editPk, saveDrawerVisible, detailDrawerVisible, operateType, detail, add, del, edit, switchDeleted, save } = getOperations(apisRequest, dataPageList, pkFields, search)
        provide('closeSaveDrawer', () => saveDrawerVisible.value = false)
        provide('closeDetailDrawer', () => detailDrawerVisible.value = false)

        onMounted(() => {
            search()
            getSystemSelectList.search()
        })

        return {
            tableRef,
            columns,
            handleSortChange: handleSortChange(sortParams, defaultSortParams, search),
            handleSelectionChange,
            selectedRows,
            pageSizeOptions: PageSizeOptions,
            resultTypeSelectList,
            systemSelectList: getSystemSelectList.dataList,
            searchParams, pageNum, pageSize,
            searchParamsConfig,
            search,
            dataPageList,
            operateType,
            saveDrawerVisible,
            detailDrawerVisible,
            editPk,
            detail,
            add,
            edit,
            save,
            switchDeleted,
            del,
            disableSelected: disableSelected(afterOperation),
            enableSelected: enableSelected(afterOperation),
            deleteSelected: deleteSelected(() => {
                afterOperation();
                search();
            })
        }
    }
})
</script>

<style scoped>
</style>
